<template>
<div>
  <table class="my-table">
    <thead>
      <tr>
        <th>就诊日期</th>
        <th>医生姓名</th>
        <th>诊断结果</th>
        <th>处方信息</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item, index) in list" :key="index">
        <td>{{ item.date }}</td>
        <td>{{ item.doctor }}</td>
        <td>{{ item.diagnosis }}</td>
        <td>{{ item.prescription }}</td>
        <td @click='detail(index)'>详情</td>
      </tr>
    </tbody>
  </table>
  <visit-details 
    :list="newList" 
    :flag="flag"
    @closeModal="closeModal">
  </visit-details>
</div>
</template>

<script>
import VisitDetails from './VisitDetails.vue';
export default {
  components: {VisitDetails},
  props: {
    list: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      flag:false,
      newList:{}
    };
  },
  watch: {},
  computed: {},
  created() {},
  mounted() {},
  methods: {
    detail(i){
      this.flag = true
      this.newList = this.list[i]
    },
    closeModal(val){
      this.flag = val
    }
  },
};
</script>
<style scoped>
.my-table {
  border-collapse: collapse;
  width: 100%;
}

.my-table td,
.my-table th {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

.my-table th {
  background-color: #f2f2f2;
}
</style>